<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WebUploader上传组件测试页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
</head>
<body class="childrenBody">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>高级应用：制作一个多文件列表</legend>
    </fieldset>
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr><th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn" id="testListAction">开始上传</button>
    </div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>自定义：统一上传窗口</legend>
    </fieldset>
    <button type="button" class="layui-btn" id="upload" onclick="Annex.upload()">上传文件</button>
    <button type="button" class="layui-btn" id="view" onclick="Annex.view()">查看文件</button>
    <script type="text/javascript" src="../../js/layui/layui.js"></script>
    <script type="text/javascript" src="../../js/public.js"></script>
    <script type="text/javascript" src="../component/annex/Annex.js"></script>
    <script type="text/javascript">
        var fkUuid = "fk_12345";

        layui.use(['upload','layer'], function(){
            var $ = layui.jquery
                ,layer = parent.layer
                ,upload = layui.upload;


            // 多文件列表示例
            var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                elem: '#testList'
                ,url: WEBAPP_ROOTPATH + '/annex/upload'
                ,data: {fkUuid: fkUuid}
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列
                    // 读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        // 单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        // 删除
                        tr.find('.demo-delete').on('click', function(){
                            alert($(this).hasClass("demo-delete-file"));
                            if($(this).hasClass("demo-delete-file")){
                                layer.confirm('同步删除将删除对应的文件，是否继续？', {icon: 3, title:'提示'}, function(index){
                                    let uuid = tr[0].id.substring("upload-".length);
                                    removeAnnexByFK(uuid);
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                    layer.close(index);
                                });
                            }else {
                                delete files[index]; //删除对应的文件
                                tr.remove();
                                uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                            }

                        });
                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.status == '1000000'){ // 上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        var tds3 = tds.eq(3);
                        tds3.find('.demo-delete').addClass("demo-delete-file").text("同步删除文件"); // 清空操作
                        tr[0].id = "upload-" + res.result;
                        return delete this.files[index]; // 删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); // 显示重传
                }
            });

            getAnnexByFK(fkUuid);

            /**
             * 根据FKuuid查找对应的附件
             *
             */
            function getAnnexByFK(fkUuid){
                $.ajax({
                    url : WEBAPP_ROOTPATH + "/annex/fkUuid/" + fkUuid,
                    type : "GET",
                    async : false,
                    success: function (data) {
                        if(data){
                            for(let i = 0; i < data.length; i++){
                                appendAnnex(data[i]);
                            }
                        }
                    }
                });
            }

            /**
             * 根据uuid删除对应的附件
             */
            function removeAnnexByFK(uuid){
                $.ajax({
                    url : WEBAPP_ROOTPATH + "/annex/uuid/" + uuid,
                    type : "DELETE",
                    async : false,
                    success: function (data) {
                        data = eval('(' + data + ')');
                        if(data.status != '1000000'){
                            layer.msg(data.result);
                            return false;
                        }
                    }
                });
            }

            /**
             * 组织、展示annex列表
             * @param annex
             */
            function appendAnnex(annex){
                var tr = $(['<tr id="upload-'+ annex.uuid +'">'
                    ,'<td>'+ annex.fileName +'</td>'
                    ,'<td>'+ (annex.fileSize/1024).toFixed(1) +'kb</td>'
                    ,'<td>已上传</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete demo-delete-file">同步删除文件</button>'
                    ,'</td>'
                    ,'</tr>'].join(''));

                // 同步删除文件
                tr.find('.demo-delete-file').on('click', function(){
                    layer.confirm('同步删除将删除对应的文件，是否继续？', {icon: 3, title:'提示'}, function(index){
                        let uuid = tr[0].id.substring("upload-".length);
                        removeAnnexByFK(uuid);
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        layer.close(index);
                    });

                });
                demoListView.append(tr);
            }
        });

    </script>
</body>
</html>